<template>
	<view style="padding-bottom: 40rpx;">
		<view class="top"></view>
		<view class="search-content">
			<!-- <view class="search">
				<view class="search-left" @click="bindSearchHandle">
					<view class="search-icon">
						<image src="/static/images/search.png" mode="widthFix"></image>
					</view>
					<view class="search-input">
						<input type="text" disabled v-model="keyword" placeholder="物流查询">
					</view>
				</view>
				<view class="search-right" @click="bindSearchHandle">
					<view class="right-hr"></view>
					<view class="right-btn">
						<text>搜索</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="classify-list z-index">
			<view class="classify-item" v-for="(item,index) in classifList" :key="index" @click="goPage(item.path)">
				<view class="classify-icon">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="classify-title">
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="menu-list z-index">
			<view class="menu-content">
				<view class="menu-item" v-for="(item,index) in menuList" :key="index" @click="menuClick(item)">
					<view class="menu-icon">
						<u-badge class="badeg" bgColor="#E82E2E" absolute max="99" :value="item.orderNum"
							:offset="[0,-8]"></u-badge>
						<image :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="menu-title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list z-index" style="margin-top: 5vh;">
			<view class="order-content">
				<view class="order-item" v-for="(item,index) in orderList" :key="index" @click="orderMenuTap(item)">
					<view class="order-icon">
						<u-badge class="badeg" bgColor="#E82E2E" absolute max="99" :value="item.orderNum"
							:offset="[0,-8]"></u-badge>
						<image :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="order-title">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="balance">
			<view class="balance-content">
				<view class="balance-title">
					<text>账户余额</text>
				</view>
				<view class="balance-detail">
					<view class="price">
						<text>{{remainMoney || 0.00}}</text>
					</view>
					<view class="balance-btn">
						<view class="btn-item" @click="rechargePrice">
							<text>立即充值</text>
						</view>

					</view>
				</view>
			</view>
		</view> -->
		<view class="notice">
			<view class="notice-content" v-for="(item, index) in noticeList" :key="index" @click="artilceDetail(item)">
				<view class="notice-title">
					<text>{{item.title || ''}}</text>
				</view>
				<view class="notice-detail">
					<text>{{item.content || ''}}</text>
				</view>
			</view>
		</view>
		<view class="notice">
			<view class="notice-content">
				<view class="notice-title">
					<text>提示：</text>
				</view>
				<view class="notice-detail">
					<text>APP 批量导入后，其它功能请关注《缔惠盛合国际物流》官方微信公众号操作，带来不便非常抱歉！其它功能会尽快完善！</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		noticeListApi,
		statisticsLogisticsApi,
		getRemainMoneyApi
	} from '@/api/index.js';
	import {
		userBindingWechat
	} from '@/api/user.js';
	import {
		mapState
	} from 'vuex';
	import {
		getUrlCode
	} from '@/common/login.js';
	export default {
		data() {
			return {
				keyword: '',
				classifList: [
					// {
					// 	title: '',
					// 	// icon: '/static/images/classify1.png',
					// 	// path:'/pages/receive/insert'
					// }
					// {
					// 	title: '取件急发',
					// 	icon: '/static/images/classify1.png',
					// 	// path:'/pages/receive/insert'
					// },
					// {
					// 	title: '取件集运',
					// 	icon: '/static/images/classify2.png',
					// 	// path:'/pages/transport/index'
					// },
					// {
					// 	title: '快递急发',
					// 	icon: '/static/images/classify3.png',
					// 	// path:'/pages/express/issue'
					// },
					// {
					// 	title: '快递集运',
					// 	icon: '/static/images/classify4.png',
					// 	// path:'/pages/centralized/index'
					// }
				],
				menuList: [
					{
						title: '导入拼多多',
						icon: '/static/images/menu8.png',
						path: '/pages/pddimport/pddimport'
						// path: '/pages/pddimport/pddlist'
					},{
						title: '导入淘宝',
						icon: '/static/images/taobao.png',
						path: '/pages/taobaoimport/taobaoimport?status=0'
						// path: '/pages/pddimport/pddlist'
					},{
						title: '导入1688',
						icon: '/static/images/1688.png',
						path: '/pages/albbimport/albbimport'
						// path: '/pages/pddimport/pddlist'
					}
				],
				orderList: [{
						title: '待进仓',
						icon: '/static/images/order1.png',
						path:'/pages/order/order?type=notWarehousing',
						orderNum: 0,
						key: 'un_inside_num'
					},
					// {
					// 	title: '已进仓',
					// 	icon: '/static/images/order2.png',
					// 	// path:'/pages/order/order?type=warehousing',
					// 	orderNum: 0,
					// 	key: 'inside_num'
					// },
					// {
					// 	title: '待出仓',
					// 	icon: '/static/images/order3.png',
					// 	// path:'/pages/order/order?type=outWarehousing',
					// 	orderNum: 0,
					// 	key: 'waitout_num'
					// },
					// {
					// 	title: '待签收',
					// 	icon: '/static/images/order4.png',
					// 	// path:'/pages/order/index',
					// 	orderNum: 0,
					// 	key: 'waitsign_num',
					// 	func: 'orderNotSign'
					// }
				],
				noticeData: {
					p: 1,
					type: 3,
				},
				noticeList: [],
				remainMoney: 0,
			}
		},
		async onLoad() {
			// console.log(this.data)
			// if (!this.isLogin) {
			// 	uni.reLaunch({
			// 		url: '/pages/login/index'
			// 	});
			// 	return;
			// }
			// let code = getUrlCode();
			// console.log(code);
			// if (code) {
			// 	await this.bindingWechat(code);
			// }
		},
		async onShow() {
			if (!this.isLogin) {
				return;
			}
			await this.noticeApi();
			await this.orderTotal();
			await this.getRemainMoneyApi();
		},
		computed: {
			...mapState(['isLogin'])
		},
		watch: {
			isLogin() {
				// if (!this.isLogin) {
				// 	uni.reLaunch({
				// 		url: '/pages/login/index'
				// 	});
				// 	return;
				// }
			}
		},
		async onPullDownRefresh() {
			await this.noticeApi();
			await this.orderTotal();
			await this.getRemainMoneyApi();
			uni.stopPullDownRefresh();
		},
		methods: {
			async bindingWechat(code) {
				let _this = this;
				try {
					if (!code) {
						return;
					}
					await userBindingWechat(code);
					uni.showModal({
						title: '提示',
						content: '微信绑定成功',
						showCancel: false,
						success() {
							location.href = _this.$visitDomain;
						}
					});
				} catch (e) {
					console.log(e);
					uni.hideToast();
					uni.showModal({
						title: '提示',
						content: e.message,
						showCancel: false,
						success() {
							location.href = _this.$visitDomain;
						}
					})
				}
			},
			artilceDetail(item) {
				app.globalData.articleDetail = item;
				// uni.navigateTo({
				// 	url: '/pages/index/article-detail'
				// });
			},
			bindSearchHandle() {
				// app.globalData.generalOrderSearch = true;
				// uni.switchTab({
				// 	url: '/pages/search/index'
				// });
			},
			orderNotSign(item) {
				app.globalData.orderPageCondition.navIndex = 3;
				// console.log(item.path)
				// uni.navigateTo({
				// 	url: item.path,
				// 	fail() {
				// 		uni.switchTab({
				// 			url: item.path
				// 		});
				// 	}
				// });
			},
			orderMenuTap(item) {
				if (item.func) {
					this[item.func](item);
					return;
				}
				uni.navigateTo({
					url: item.path,
					fail() {
						uni.switchTab({
							url: item.path
						});
					}
				});
			},
			orderNotPay(item) {
				app.globalData.orderPageCondition.navIndex = 1;
				// uni.navigateTo({
				// 	url: item.path,
				// 	fail() {
				// 		uni.switchTab({
				// 			url: item.path
				// 		});
				// 	}
				// });
			},
			menuClick(item) {
				// let now = new Date();
				// var deadline = new Date('2024-05-20T00:00:00+08:00'); // 设定截止时间为北京时间 2023 年 9 月 30 日 00:00:00
				// if (now.getTime() < deadline.getTime()) {
					if (item.path == undefined) {
						// this[item.func](item);
						return; 
					}
					// console.log(item.path)
					uni.navigateTo({
						url: item.path,
						fail() {
							uni.switchTab({
								url: item.path
							});
						}
					});
				// }
				// console.log(item.path)
			},
			voucherInsert() {
				// uni.navigateTo({
				// 	url: '/pages/voucher/insert'
				// });
			},
			rechargePrice() {
				// uni.navigateTo({
				// 	url: '/pages/recharge/index'
				// });
			},
			goPage(path) {
				// uni.navigateTo({
				// 	url:path,
				// 	fail() {
				// 		uni.switchTab({
				// 			url:path
				// 		})
				// 	}
				// })
			},

			async noticeApi() {
				try {
					let response = await noticeListApi(this.noticeData);
					let list = response.data.articleList;
					this.noticeList = (list && list.length) ? [list[0]] : [];
				} catch (e) {}
			},
			async orderTotal() {
				try {
					let res = await statisticsLogisticsApi();
					let orderNum = res.data || {};
					this.orderList = this.orderList.map(item => {
						item.orderNum = orderNum[item.key] || 0;
						return item;
					});
					this.menuList.forEach(item => {
						if (item.title == '待付款') {
							item.orderNum = orderNum.waitsign_num || 0
						}
					})
				} catch (e) {
					console.log(e);
				}
			},
			async getRemainMoneyApi() {
				try {
					let response = await getRemainMoneyApi();
					this.remainMoney = response.userRemainMoney;
				} catch (e) {}
			}

		},
		mounted: () => {
		uni.hideLoading();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.z-index {
		position: relative;
		z-index: 2;
	}

	.top {
		width: 100%;
		height: 500rpx;
		position: relative;
		z-index: 1;
		overflow: hidden;

		&::after {
			content: '';
			width: 200%;
			height: 470rpx;
			position: absolute;
			left: -50%;
			top: 0;
			border-radius: 0 0 50% 50%;
			background: linear-gradient(360deg, #D9120C 0%, #EA1D10 100%);
		}

		&::before {
			content: '';
			width: 300%;
			height: 490rpx;
			position: absolute;
			left: -100%;
			top: 0;
			border-radius: 0 0 50% 50%;
			background: #F9D6D5;
		}
	}

	.search-content {
		margin-top: -500rpx;
		position: sticky;
		top: 0;
		z-index: 5;
		padding: 30rpx;
		box-sizing: border-box;
		background: linear-gradient(360deg, #D9120C 0%, #EA1D10 100%);

		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFF;
			border-radius: 16rpx;
			height: 80rpx;

			.search-left {
				width: 510rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: inherit;

				.search-icon {
					width: 52rpx;
					height: 52rpx;

					image {
						width: inherit;
						height: inherit;
					}
				}

				.search-input {
					width: 402rpx;
					height: inherit;

					input {
						width: 100%;
						height: inherit;
						color: #2F3133;
						font-size: 28rpx;
					}
				}
			}

			.search-right {
				width: 180rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				height: inherit;

				.right-hr {
					width: 6rpx;
					height: 32rpx;
					background: rgba(#E0E0E0, 0.23);
					border-radius: 3rpx;
				}

				.right-btn {
					width: 120rpx;
					height: inherit;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}
			}
		}

	}

	.classify-list {
		padding: 40rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.classify-item {
			.classify-icon {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.classify-title {
				padding-top: 14rpx;
				font-size: 26rpx;
				color: #FFF;
				font-weight: bold;
			}
		}
	}

	.menu-list {
		padding: 18rpx 30rpx;
		box-sizing: border-box;

		.menu-content {
			width: 100%;
			background-color: #FFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			display: flex;
			// justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			// margin-bottom: -42rpx;
			padding: 38rpx 0 0 0;

			.menu-item {
				width: calc(100%/4);
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-bottom: 42rpx;

				.menu-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					.badeg {
						z-index: 9;
					}
				}

				.menu-title {
					padding-top: 10rpx;
					color: #333;
					font-size: 24rpx;
					font-weight: 500;
				}
			}

		}
	}

	.order-list {
		// margin-top: 13vh;
		padding: 0 30rpx;
		box-sizing: border-box;

		.order-content {
			width: 100%;
			background-color: #FFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 44rpx 38rpx 28rpx 38rpx;
			box-sizing: border-box;

			.order-item {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.order-icon {
					width: 68rpx;
					height: 68rpx;
					position: relative;

					image {
						width: inherit;
						height: inherit;
					}

					.badeg {
						z-index: 9;
					}
				}

				.order-title {
					font-size: 28rpx;
					color: #333;
					font-weight: bold;
					padding-top: 20rpx;
				}
			}
		}
	}

	.balance {
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.balance-content {
			width: 100%;
			background-color: #FFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 38rpx 34rpx;
			box-sizing: border-box;

			.balance-title {
				color: #333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.balance-detail {
				padding-top: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					display: inline-flex;
					align-items: flex-end;
					justify-content: flex-start;
					font-size: 54rpx;
					color: #333;
					font-weight: bold;
					font-weight: 800;

					&::before {
						content: '￥';
						color: inherit;
						font-size: .65em;
						transform: translateY(-2rpx) translateX(4rpx);
					}
				}

				.balance-btn {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.btn-item {
						width: 148rpx;
						height: 60rpx;
						border-radius: 8rpx;
						border: 2rpx solid #E6201A;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;

						&:first-child {
							margin-right: 16rpx;
							color: #E6201A;
						}

						&:last-child {
							color: #FFF;
							background-color: #E6201A;
						}
					}
				}
			}
		}
	}

	.notice {
		padding: 10px 30px 0 30rpx;
		box-sizing: border-box;

		.notice-content {
			width: 100%;
			background-color: #FFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			padding: 32rpx 34rpx;
			box-sizing: border-box;
			margin-bottom: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.notice-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

			.notice-detail {
				padding-top: 18rpx;
				font-size: 30rpx;
				line-height: 42rpx;
				color: #666;
				font-weight: 500;
			}
		}
	}
</style>
